<!--
 * @Author: zhangxiangsheng 1026583651@qq.com
 * @Date: 2024-06-25 14:03:16
 * @LastEditors: zhangxiangsheng 1026583651@qq.com
 * @LastEditTime: 2024-06-26 13:30:25
 * @FilePath: \appGly\pages\GetRfCD\components\ddxq.vue
 * @Description: 
 * 
 * Copyright (c) 2024 by ${git_name_email}, All Rights Reserved. 
-->
<template>
	<u-popup :show="show" mode="right" width="100%" :zoom="false">
		<view style="min-height: 100vh; background: #f4f7f8">
			<u-navbar title="订单详情" @leftClick="
          () => {
            show = !show;
          }
        " :autoBack="false" :bgColor="bgColor" leftIconColor="#fff" :titleStyle="titleStyle"></u-navbar>
			<view class="bg"></view>
			<view class="list">
				<view class="item ddxx">
					<view class="label">
						{{ $z.$t("订单信息") }}
					</view>
					<!-- <u-button
            type="primary"
            text="已完成"
            style="width: auto; margin: 0"
            size="mini"
          ></u-button> -->
				</view>

				<view class="item" :class="{ noafter: key + 1 == list.length }" v-for="(item, key) in list" :key="key">
					<view class="">
						{{ item.label }}
					</view>
					<view class="value u-line-1">
						{{ item.value }}
					</view>
				</view>
			</view>
		</view>
	</u-popup>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				bgColor: "#2093f5",
				titleStyle: {
					color: "#fff",
				},
				query: {},
			};
		},
		computed: {
			cdsj() {
				if (!this.query.sjcds) {
					return "0";
				}
				if (!this.query.sjcde) {
					return "";
				}
				// 充满自停
				return (
					this.$z.timefn.getUTCtimeceil(this.query.sjcds, this.query.sjcde) +
					this.$z.$t("分钟")
				);
			},
			list() {
				let query = this.query;
				if (!query.ddh) {
					return [];
				}
				let r = [{
						label: this.$z.$t("订单编号"),
						value: query.ddh,
					},
					{
						label: this.$z.$t("开始时间"),
						value: query.sjcds || query.sjc,
					},
					{
						label: this.$z.$t("结束时间"),
						value: query.sjcde,
					},
					{
						label: this.$z.$t("充电时长"),
						value: this.cdsj,
					},
					{
						label: this.$z.$t("设备ID"),
						value: query.gtel,
					},
					{
						label: this.$z.$t("枪号"),
						value: this.$z.tdxs(query.td) + this.$z.$t("枪"),
					},
					{
						label: this.$z.$t("站点名称"),
						value: query.pcsxs,
					},
					{
						label: this.$z.$t("电量"),
						value: this.$z.dlxs(query.dl),
					},
				];

				if (query.jetk && query.jetk != "0") {
					r.push({
						label: this.$z.$t("支付金额"),
						value: (Number(query.jetk) + Number(query.je)) / 100 +
							this.$z.$t("元"),
					}, {
						label: this.$z.$t("充电金额"),
						value: Number(query.je) / 100 + this.$z.$t("元"),
					}, {
						label: this.$z.$t("退款金额"),
						value: Number(query.jetk) / 100 + this.$z.$t("元"),
					});
				} else {
					r.push({
						label: this.$z.$t("金额"),
						value: Number(query.je) / 100 + this.$z.$t("元"),
					});
				}

				r.push({
					label: this.$z.$t("支付方式"),
					value: this.$z.zffs(query),
				});
				return r;
			},
		},
		methods: {
			async init(data) {
				this.show = true;
				let item = data;
				let ChargeCarSys = await this.$store.dispatch("request/getRequest", {
					url: "/ChargeCarSys",
					data: {
						gtel: item.gtel,
					},
				});
				ChargeCarSys = ChargeCarSys[0];
				let StationCar = await this.$store.dispatch("request/getRequest", {
					url: "/Station",
					data: {
						id: ChargeCarSys.pcs,
					},
				});
				data.pcsxs = StationCar[0].pcs || "";
				this.query = data;
			},
		},
	};
</script>

<style lang="scss" scoped>
	.bg {
		height: 240rpx;
		background: #2093f5;
		// position: fixed;
		top: 80rpx;
		left: 0;
		right: 0;
		z-index: -1;
	}

	.list {
		margin: 0rpx 30rpx;
		margin-top: -200rpx;
		background: #fff;
		border-radius: 10rpx;
		padding-bottom: 20rpx;

		.item {
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 30rpx;
			position: relative;
			color: #666666;

			&::after {
				content: "";
				position: absolute;
				left: 30rpx;
				bottom: 0;
				height: 1rpx;
				background: #e5e5e5;
				right: 30rpx;
			}

			.value {
				width: 0;
				flex: auto;
				text-align: right;
			}
		}

		.ddxx {
			height: 100rpx;
			font-size: 30rpx;
			color: #333;
			font-weight: bold;

			.label {
				display: flex;

				&:before {
					content: "";
					width: 8rpx;
					height: 28rpx;
					background: #2093f5;
					border-radius: 4rpx;
					display: block;
					margin-right: 8rpx;
					position: relative;
					top: 8rpx;
				}
			}
		}
	}

	.noafter {
		&::after {
			display: none;
		}
	}
</style>